<template>
  <transition name="fade">
    <div class="all-state" v-show="show">
      <div class="contents">
        <span
          class="content border-bottom hover-style"
          v-for="(item, index) in listData" 
          :key="item.id"
          :class="activeIndex == index ? 'active' : ''"
          @click="updateActiveIndex(index)"
          >
          <span>{{item.name}}</span>
        </span>
      </div>
    </div>
  </transition>
</template>

<script>
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'
export default {
  components: {
    DropdownPicker
  },
  props: {
    listData: {
      type: Array, 
      default: function() {
        return [
          {
            id: 1,
            name: '全部',
          },
          {
            id: 2,
            name: '未开奖',
          },
          {
            id: 3,
            name: '已中奖',
          },
          {
            id: 4,
            name: '未中奖',
          },
          {
            id: 5,
            name: '撤单',
          },
          {
            id: 6,
            name: '系统撤单',
          },
          {
            id: 7,
            name: '其他',
          },
        ]
      }
    },
    show: {
      type: Boolean,
      default: true
    },
    // activeIndex: {
    //   type: Number,
    //   default: 0
    // }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    updateActiveIndex(index) {
      this.activeIndex = index
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .all-state 
      width 100%
      background #fff
      box-sizing border-box 
      border 1px solid rgba(219, 211, 211, 1)
      box-shadow 0px 3px 5px 0px rgba(0, 0, 0, 0.1)
      border-radius 0px 0px 3px 3px
      &.fade-enter, &.fade-leave-to 
        opacity 0
      &.fade-enter-active, &.fade-leave-active 
        transition opacity 0.3s
      .contents 
        display flex 
        flex-wrap wrap
        align-items center
        width 100%
        height 100% 
        box-sizing border-box 
        .content 
          width 100%
          height 32px
          line-height 32px
          text-align center
          font-weight 400 
          color $color-theme-dark
          &.active 
            color #fff
            background $color-theme-red
            // border 1px solid $color-theme-red
</style>